<template>
  <div class="content-left-wrap">
    <div class="top-wrap">
      <Card :bordered="false">
        <div slot="title" class="filter-box">
          <div class="tit">用气量和表具数量折线图[{{ currentSelectedGasCls }}]</div>
          <Row :gutter="5">
            <i-col span="10">
              <DatePicker
                type="date"
                size="small"
                placeholder="起始日期"
                @on-change="changeStartTime('rainfallFilter', 'endTime')"
                v-model="rainfallFilter.startTime"
              ></DatePicker>
            </i-col>
            <i-col span="10">
              <DatePicker
                type="date"
                size="small"
                :options="rainfallFilterEndDateOptions"
                v-model="rainfallFilter.endTime"
                placeholder="结束日期"
              ></DatePicker>
            </i-col>
            <i-col span="4">
              <Button type="primary" size="small" @click="handleDateClick">确认</Button>
            </i-col>
          </Row>
        </div>
        <div class="chart-box">
          <e-line :chartData="rainfallChartData" @q-click="handleELineClick" />
          <Spin fix size="large" v-if="rainListLoading">
            <Icon type="ios-loading" size="20" class="demo-spin-icon-load"></Icon>
            <div>图表生成中...</div>
          </Spin>
        </div>
      </Card>
    </div>
    <div class="bottom-wrap">
      <Card>
        <div slot="title" class="clearfix">
          <span
            >表格 <span v-show="tableTime">[ {{ tableTime }} ]</span></span
          >
          <span class="fr" title="操作表格数据" style="cursor: pointer;" @click="handleOperateTable">
            <Icon type="md-qr-scanner" />
          </span>
        </div>
        <div class="table-box">
          <simple-table
            :tableColums="tableColums"
            :tableData="tableData"
            :tableLoading="tableLoading"
            :pageSize="tablePageParams.pageSize"
            :pageNum="tablePageParams.pageNum"
            @handleChangePage="handleChangePage"
            @hanleRowClick="handleRowClick"
            :refreshBtn="false"
          />
        </div>
      </Card>
    </div>
    <!-- 表格操作 -->
    <Modal
      class="operate-table"
      fullscreen
      v-model="showOperateTableFlag"
      :title="tableTime"
      @on-cancel="operateTableCancel"
    >
      <div :is="operateTableTemplate" :params="{ currentDay: tableTime, gasClass: currentSelectedGasCls }"></div>
      <div slot="footer">
        <Button @click="operateTableCancel" ghost>关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { merge, each, isEmpty } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import SimpleTable from '@/commons/SimpleTable'
import tableColums from './tableColums'
import { eLineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('dailyview')

export default {
  name: 'dailyview-content-left',
  components: {
    SimpleTable,
    ELine: () => import('@/commons/charts/ELine'),
    TableAndBarlineMarker: () => import('@/commons/TableAndBarlineMarker')
  },
  data() {
    return {
      rainfallFilter: {
        startTime: undefined,
        endTime: undefined
      },
      showOperateTableFlag: false,
      operateTableTemplate: null
    }
  },
  computed: {
    ...mapState([
      'currentSelectedGasCls',
      'currentSelectedMapDate',
      'currentSelectedMeterId',
      'tableLoading',
      'tableHeight',
      'tableData',
      'tablePageParams',
      'rainListLoading',
      'rainList',
      'defaultDate',
      'minimapCenter'
    ]),
    rainfallFilterEndDateOptions() {
      const that = this
      return {
        disabledDate(date) {
          const { startTime } = that.rainfallFilter
          return date && date.valueOf() < startTime && dayjs(startTime).valueOf()
        }
      }
    },
    rainfallChartData() {
      const _xAxisList = []
      const _firstList = []
      const _twoList = []
      each(this.rainList, item => {
        const { tId, count, sum } = item
        _xAxisList.push(tId)
        _firstList.push({
          name: tId,
          value: count
        })
        _twoList.push({
          name: tId,
          value: sum
        })
      })

      return merge({}, eLineOptions, {
        xAxis: [
          {
            data: _xAxisList
          }
        ],
        series: [
          {
            data: _firstList
          },
          {
            data: _twoList
          }
        ]
      })
    },
    tableColums() {
      return tableColums
    },
    tableTime() {
      return this.currentSelectedMapDate || this.defaultDate
    }
  },
  watch: {
    currentSelectedGasCls() {
      if (!isEmpty(this.currentSelectedGasCls)) {
        this.changeMinimapCenter([])
      }
      this.loadTableData()
      this.handleDateClick()
    }
  },
  mounted() {
    this.loadTableData()
    this.loadRainData()
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'loadRainData',
      'changeCurrentMeterId',
      'changeMinimapCenter',
      'changeCurrentSelecteMapDate',
      'loadHeatMapData',
      'changeTablePageNum',
      'changeHeatMapSwiperState'
    ]),
    handleDateClick() {
      this.changeHeatMapSwiperState(true)
      const { startTime, endTime } = this.rainfallFilter
      const retStartDate = startTime ? dayjs(startTime).format('YYYY-MM-DD') : undefined
      const retEndDate = endTime ? dayjs(endTime).format('YYYY-MM-DD') : undefined
      this.loadRainData({
        startTime: retStartDate,
        entTime: retEndDate
      })
    },
    handleELineClick(params) {
      this.changeHeatMapSwiperState(true)
      if (this.minimapCenter) {
        this.changeMinimapCenter([])
      }
      const { data = {} } = params
      const { name } = data
      this.changeCurrentSelecteMapDate(name)
      this.loadHeatMapData()
      this.loadTableData()
    },
    handleOperateTable() {
      this.changeHeatMapSwiperState(true)
      if (isEmpty(this.tableData)) {
        this.$Notice.warning({
          title: '操作提示',
          desc: '数据正在准备中，请稍后再操作'
        })
      } else {
        this.showOperateTableFlag = true
        this.$nextTick(() => {
          this.operateTableTemplate = 'TableAndBarlineMarker'
        })
      }
    },
    handleRowClick(row) {
      const { meterId, latitude, longitude } = row
      if (this.currentSelectedMeterId !== meterId) {
        this.changeHeatMapSwiperState(true)
        this.changeCurrentMeterId(meterId)
        this.changeMinimapCenter([longitude, latitude])
      }
    },
    handleChangePage(num) {
      this.changeHeatMapSwiperState(true)
      this.changeTablePageNum(num)
      this.loadTableData()
    },
    /**
     * @msg: 表格中数据异常列突出显示
     * @param {type}
     * @return:
     */
    rowClassName(row = {}) {
      const { status } = row
      if (Number(status) === 1) {
        return 'row-abnormal'
      }
      return ''
    },
    operateTableCancel() {
      this.showOperateTableFlag = false
      this.operateTableTemplate = null
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-left-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.top-wrap,
.bottom-wrap {
  flex: 1;
}

.top-wrap {
  .tit {
    margin-bottom: 5px;
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.bottom-wrap {
  margin-top: 10px;
  .table-box {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}

// 表格数据操作
.operate-table {
  @{deep} .ivu-modal-body {
    top: 44px;
    bottom: 54px;
  }
}
</style>
